<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--服务菜单数据-->
      <el-col :span="5" :xs="24">
        <div class="head-container">
          <el-input v-model="menuName" placeholder="请输入服务名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container" style="margin-bottom: 20px">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addMenu">新增</el-button>
          <el-button type="success" plain icon="el-icon-edit" size="mini" @click="editMenu"
            :disabled="menuBtn">修改</el-button>
          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="deleteMenu"
            :disabled="menuBtn">删除</el-button>
        </div>
        <div class="head-container">
          <el-tree :data="menuOptions" :props="defaultProps" :expand-on-click-node="false" ref="tree" node-key="menuId"
            :filter-node-method="filterNode" @node-click="handleNodeClick" default-expand-all highlight-current
            :current-node-key="currentMenuId" />
        </div>
      </el-col>
      <!--菜单树的增删改查  -->
      <el-dialog :visible.sync="menuTreeDialog.open" width="600px" append-to-body :before-close="menuTreeDialogCancel">
        <el-form ref="menuForm" title="菜单设置" :model="menuForm" label-width="100px" :rules="menuTreeDialog.rules">
          <el-form-item label="菜单类型" prop="menuLeave">
            <el-select placeholder="请选择创建的菜单类型" v-model="menuForm.menuLeave">
              <el-option v-for="item in menuLeaveOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="上级菜单" v-show="menuTreeDialog.level1Selector" prop="parentId">
            <el-select placeholder="请选择一级菜单" v-model="menuForm.parentId">
              <el-option v-for="item in leave1Options" :key="item.menuId" :label="item.menuName" :value="item.menuId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="menuForm.menuName" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="menuTreeDialogSubmit">确 定</el-button>
          <el-button @click="menuTreeDialogCancel">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 服务详情 -->
      <el-col :span="8" v-if="service.menuId">
        <service :serviceParams="service" :submitService="submitService" />
      </el-col>
      <el-col :span="11" v-if="service.serviceId">
        <standards :serviceId="service.serviceId" :standardsList="standards" :submitStand="submitStand" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { treeMenuList, menuList, addMenu, editMenu, queryMenu, deleteMenu, getService, getStandards } from '@/api/miniprogram/service'
import service from './service.vue'
import standards from './standards.vue';
export default {
  name: "Menu",
  components: {
    service,
    standards
  },
  data() {
    return {
      //服务菜单树
      menuOptions: undefined,
      //菜单树配置
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      //菜单树检索关键字
      menuName: '',
      //菜单未选中按钮禁用
      menuBtn: true,
      //菜单树增删改查配置
      menuTreeDialog: {
        open: false,//弹窗显示控制
        level1Selector: false,//一级菜单选择框显示控制
        oldMenu: {},
        rules: { //服务菜单校验规则
          menuLeave: [
            { required: true, message: "请选择菜单类型" }
          ],
          parentId: [
            {
              validator: (rule, value, callback) => {
                if (this.menuForm.menuLeave == 0) callback();
                else {
                  if (value == null || value == '') {
                    callback(new Error("请指定上级菜单"))
                  }
                }
              }
            }
          ],
          menuName: [
            { required: true, message: "菜单名称不能为空" },
            { min: 2, max: 20, message: '菜单名称长度介于2到20字符之间' }
          ]
        }
      },
      menuLeaveOptions: [{ value: 0, label: '一级菜单' }, { value: 1, label: '二级菜单' }],//菜单类型列表
      leave1Options: [],//一级菜单选项
      //服务菜单参数
      menuForm: {},
      //当前点击菜单id
      currentMenuId: undefined,


      //服务详情
      service: {},
      //服务规格
      standards: [],
    };
  },
  created() {
    this.getTree();
  },
  watch: {

    // 根据名称筛选服务菜单树
    menuName(val) {
      this.$refs.tree.filter(val);
    },
    //新增服务菜单时，若选择二级菜单，则提示选择所属一级菜单
    'menuForm.menuLeave'(menuLeave) {
      if (menuLeave == 1) {
        this.menuTreeDialog.level1Selector = true
      } else {
        this.menuTreeDialog.level1Selector = false
      }
    }
  },
  methods: {
    //查询服务菜单下拉树
    getTree() {
      treeMenuList().then(res => {
        this.menuOptions = res.data
      })
      menuList({ menuLeave: 0 }).then(res => {
        this.leave1Options = res.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.menuName.indexOf(value) !== -1;
    },
    //查询服务详情
    getServiceByMenuId(menuId) {
      this.loading = true;
      getService(menuId).then(res => {
        if (res.code == 200) {
          let service = res.data;
          if (service) {
            this.service = res.data;
            this.getStandardsList(res.data.serviceId);
          } else {
            this.initService(menuId);
          }
        }
        console.log(res);
        this.loading = false;
      }
      );
    },
    //查询规格列表
    getStandardsList(serviceId) {
      getStandards(serviceId).then(res => {
        if (res.code == 200) {
          this.standards = res.data;
        }
      })
    },
    addMenu() {
      this.menuTreeDialog.oldMenu = this.menuForm;
      this.initMenuForm();
      this.menuTreeDialog.open = true
    },
    editMenu() {
      this.menuTreeDialog.oldMenu = this.menuForm;
      this.menuTreeDialog.open = true
    },
    deleteMenu() {
      if (this.menuForm.menuId == null || this.menuForm.menuId == '') {
        return
      }
      this.$modal.confirm('是否删除' + this.menuForm.menuName).then(() => {
        deleteMenu(this.menuForm.menuId).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("删除成功");
            this.currentMenuId = '';
            this.menuBtn = true;
            this.service = {};
            this.standards = [];
            this.$refs['tree'].setCurrentKey(null);
            this.initMenuForm();
            this.getTree();
          } else {
            this.$modal.msgError("删除失败");
          }
        })
      })
    },
    //提交服务菜单信息
    menuTreeDialogSubmit() {
      let valid = true;
      this.$refs.menuForm.validate(res => {
        if (!res) valid = false;
      });
      if (!valid) return;
      //新增
      if (this.menuForm.menuId == null) {
        addMenu(this.menuForm).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("添加成功");
            this.getTree();
            this.menuTreeDialog.open = false;
          } else {
            this.$modal.msgError("添加失败");
          }
        })
      }
      //修改
      else {
        editMenu(this.menuForm).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("修改成功");
            this.getTree();
            this.menuTreeDialog.open = false;
          } else {
            this.$modal.msgError("修改失败");
          }
        })
      }
    },
    menuTreeDialogCancel() {
      this.menuForm = this.menuTreeDialog.oldMenu;
      this.menuTreeDialog.open = false;
      this.menuTreeDialog.oldMenu = {};
    },
    //服务菜单点击
    handleNodeClick(data) {
      let menuLeave = data.menuLeave;
      let menuId = data.menuId;
      if (this.menuBtn !== false) this.menuBtn = false;
      this.menuForm = data;
      //如果是二级菜单，则查询服务详情
      this.currentMenuId = menuId;
      if (menuLeave == 1) {
        this.getServiceByMenuId(menuId);
      } else {
        this.initService();
      }
    },
    //服务菜单默认处理
    initMenuForm() {
      this.menuForm = { menuName: '', menuLeave: 0, parentId: null, menuId: null };
    },
    //服务详情默认处理
    initService(menuId = undefined) {
      this.service = {
        serviceId: undefined,
        menuId: menuId,
        categoryId: 1,
        serviceName: "",
        serviceDescribe: "",
        commission: "",
        commissionType: 1,
        characteristic: [],
        serviceCoverImg: '',
        videoUrl: "",
        swiperImgUrls: [],
        serviceDetailsUrls: [],
        popularServicesImg: "",
        recommendationImg: {
          bigImg: "",
          smallImg: []
        },
        serviceTips: "",
        serviceTime: 0,
        serviceTimeStart: 1,
        serviceTimeStep: 1,
        serviceTimeNum: 2,
        serviceTimeTips: []
      }
    },
    //服务详情改变重查
    submitService() {
      this.getServiceByMenuId(this.currentMenuId);
    },
    //服务规格改变重查
    submitStand() {
      this.getStandardsList(this.service.serviceId);
    }
  },
}
</script>
<style>
.img-list {
  display: flex;
  flex-wrap: wrap;
}

.img-item {
  margin-right: 10px;
  position: relative;
}

.img-item:hover .el-upload-list__item-actions {
  display: flex;
}

.img-item .el-upload-list__item-actions {
  display: none;
  align-items: center;
  justify-content: center;
  height: 25px;
  width: 25px;
  background-color: #f2f2f2;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
}

.video-player {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-player .vjs-big-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mp-el-tree {
  font-weight: bolder;
}

.el-tree-node__label {
  font-size: 18px;
}

.image-none {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
</style>